<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
  <title>EasyUI入门——创建EasyUI的Dialog</title>
  <!-- 引入JQuery -->
  <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.min.js"></script>
  <!-- 引入EasyUI -->
  <script type="text/javascript"
          src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
  <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
  <script type="text/javascript"
          src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
  <!-- 引入EasyUI的样式文件-->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.1/themes/default/easyui.css"
        type="text/css"/>
  <!-- 引入EasyUI的图标样式文件-->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.1/themes/icon.css" type="text/css"/>
  <script type="text/javascript">

    $(function () {
      //console.info($('#dd2'));

      /*使用JavaScript动态创建EasyUI的Dialog的步骤：
       1、定义一个div，并给div指定一个id
       2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
       */

      $('#dd2').dialog();//使用默认的参数创建EasyUI的Dialog
      //使用自定义参数创建EasyUI的Dialog

      $('#dd3').dialog({
        title: '使用JavaScript创建的Dialog',
        width: 400,
        height: 200,
        closed: false,
        cache: false,
        modal: true
      });

    });
  </script>

</head>
<body>
<h2>Basic CRUD Application</h2>
<p>Click the buttons on datagrid toolbar to do crud actions.</p>

<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
       url="/user/findAll"
       toolbar="#toolbar" pagination="true"
       rownumbers="true" fitColumns="true" singleSelect="true">
  <thead>
  <tr>
    <th field="firstname" width="50">First Name</th>
    <th field="lastname" width="50">Last Name</th>
    <th field="phone" width="50">Phone</th>
    <th field="email" width="50">Email</th>
  </tr>
  </thead>
</table>
<div id="toolbar">
  <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New
    User</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit
    User</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove
    User</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px"
     closed="true" buttons="#dlg-buttons">
  <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
    <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">User Information</div>
    <div style="margin-bottom:10px">
      <input name="firstname" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
    </div>
    <div style="margin-bottom:10px">
      <input name="lastname" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
    </div>
    <div style="margin-bottom:10px">
      <input name="phone" class="easyui-textbox" required="true" label="Phone:" style="width:100%">
    </div>
    <div style="margin-bottom:10px">
      <input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%">
    </div>
  </form>
</div>
<div id="dlg-buttons">
  <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
     onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
<script type="text/javascript">
  var url;
  function newUser() {
    $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'New User');
    $('#fm').form('clear');
    url = '/user/save';
  }
  function editUser() {
    var row = $('#dg').datagrid('getSelected');
    if (row) {
      $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Edit User');
      $('#fm').form('load', row);
      url = 'update_user.php?id=' + row.id;
    }
  }
  function saveUser() {
    var user = $('#fm').serialize();
//    var user1 = $('#fm').serializeArray();
    console.log(user);
    $.ajax({
      type: 'POST',
      url: url,
      dataType:'json',
      data: user,
      success: function(data){
        if(data.success){
          $('#dlg').dialog('close');        // close the dialog
          $('#dg').datagrid('reload');    // reload the user data
        }
      },
      error: function(error){
        alert(error);
      }
    });
  }



 /* function saveUser() {
    $('#fm').form('submit', {
      url: url,
      onSubmit: function () {
        return $(this).form('validate');
      },
      dataType:"json",
      success: function (result) {
        console.log(result);
        var result = eval('(' + result + ')');
        console.log(result)
//        var result = eval('(' + result + ')');
//        if (result.errorMsg) {
//          $.messager.show({
//            title: 'Error',
//            msg: result.errorMsg
//          });
//        } else {
//          $('#dlg').dialog('close');        // close the dialog
//          $('#dg').datagrid('reload');    // reload the user data
//        }
        $('#dlg').dialog('close');        // close the dialog
        $('#dg').datagrid('reload');    // reload the user data
      }

    });
  }*/
  function destroyUser() {
    var row = $('#dg').datagrid('getSelected');
    if (row) {
      $.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function (r) {
        if (r) {
          $.post('destroy_user.php', {id: row.id}, function (result) {
            if (result.success) {
              $('#dg').datagrid('reload');    // reload the user data
            } else {
              $.messager.show({    // show error message
                title: 'Error',
                msg: result.errorMsg
              });
            }
          }, 'json');
        }
      });
    }
  }
</script>
</body>
</html>